<template>
  <!-- 授权 -->
  <div :style="PC?popup.open:popup.close" style="height:800px;width:48%; position: fixed;right: 0;">
    <!-- {{PC}}
    {{rowClone}}-->
    <!-- {{pitchon}} -->
    <div class="out">
      <div class="left" v-loading="left_loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="one">
          <span class="fontone">
            <span style="color:#999999;">
              <i class="el-icon-caret-right" @click="Conceal_201"></i>
            </span>
            <span>租户权限</span>
            <span class="icon">
              <i class="el-icon-bank-card" @click="menuSave"></i>
            </span>
          </span>
        </div>
        <!-- <div class="zero">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini"></el-input>
        </div>-->
        <div class="btns">
          <button class="childb" @click="clickAllFun">全选</button>
          <!-- <button class="childb" @click="InvertSelection">反选</button> -->
          <!-- <button class="childb" @click="menuSave">保存</button> -->
          <button class="childb" @click="resetFun">重置</button><!-- @check-change="ptv" -->
        </div>

        <div>
          <el-tree class="tree_out" :data="TreeData" show-checkbox node-key="id" ref="tree" :default-checked-keys="checkARR" :props="defaultPropsLeft" :filter-node-method="filterNode" @node-click="NodeClick"></el-tree>
        </div>
      </div>
      <div class="middle" v-loading="middle_loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="title">
          <span class="font">按钮权限</span>
          <span class="Sa">
            <i class="el-icon-bank-card" @click="SaveBtnqx"></i>
          </span>
        </div>

        <anNiuCom v-if="CheckedBtnArr.length>0" :CheckedBtnArr="CheckedBtnArr" :rowClone="rowClone" :pc="PC" :TreeSaveNode="TreeSaveNode" @backBtnList="backBtnList"></anNiuCom>
      </div>
      <div class="right" v-loading="right_loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="title">
          <span class="font">首页功能权限</span>
          <span class="Sa">
            <i class="el-icon-bank-card" @click="SaveSQ"></i>
          </span>
        </div>
        <Square v-if="SquareDataList['length']" :squaredata="SquareDataList" :pitchon="pitchon" :DERT="DERT" @backsquare="backsquare"></Square>
      </div>
    </div>
  </div>
</template>
<script>
import {
  authorityMenu,
  getCheckedBtn,
  SaveMenvFun,
  SaveBtnFun,
  getSquareFun,
  postSquareFun,
  getZHL,
  fetchTree,
  get_Sq,
} from '@/api/Tmanager'
//组件
import anNiuCom from './com/treecom/anNiuCom'
import Square from './com/treecom/Square'
export default {
  components: {
    anNiuCom,
    Square,
  },
  props: ['attributeOrder'],
  data() {
    return {
      //本组件弹出样式
      popup: {
        open: 'flex:100;transition:0.2s;overflow:hidden', //右侧组件展开时的样子
        close: 'width:0px;transition:0.2s;overflow:hidden', //右侧组件关闭时的样子
      },
      //传过来的row
      rowClone: {},
      //权限显示隐藏控制器
      PC: false,
      //树形图
      TreeData: [],
      defaultPropsLeft: {
        children: 'children',
        label: 'title',
      },
      //树形图选择
      checkARR: [],
      //保存选择的节点
      TreeSaveNode: undefined,
      //所有方块
      AllSquareArr: [],
      //按钮权限数据
      CheckedBtnArr: [],
      //按钮权限保存的obj
      SaveBFobj: {},
      //获得小方块选项
      SquareDataList: [],
      //保存小方块de数据
      SaveSD: [],
      //租户权限搜索
      filterText: '',
      //传值到小方块权限
      pitchon: [],
      //
      DERT: [],
      left_loading: true, //租户权限的loading
      middle_loading: false, //按钮权限的loading
      right_loading: true, //首页功能权限loading
    }
  },
  //查询树形图
  watch: {
    filterText(val) {
      this.$refs.TreeData.filter(val)
    },
  },
  mounted() {
    //获得到BUS参数
    this.$bus.on('goToAuthorization', (row, permissionController) => {
      this.left_loading = true
      //拷贝传过来的row
      this.rowClone = JSON.parse(JSON.stringify(row))
      //拷贝权限显示隐藏控制器
      this.PC = JSON.parse(JSON.stringify(permissionController))
      //获取菜单列表
      authorityMenu(this.$store.state.user.token).then((Response) => {
        this.TreeData = Response[0].children
        this.left_loading = false
      })
      //获取选中的租户权限
      getZHL(row.id).then((Response) => {
        // this.TreeData=

        //this.TreeData=Response
        //this.$refs.tree.setCheckedNodes(Response.data[0])
        //清空
        // this.$refs.tree.setCheckedKeys([])
        //把树形图的id递归出来
        let A = []
        function setName(T) {
          for (var i in T) {
            // A.push(T[i].id);
            if (T[i].children['length']) {
              setName(T[i].children)
            } else {
              A.push(T[i].id)
            }
          }
        }
        setName(Response.data[0].children) //调用递归
        //
        console.log('树形：', A)

        this.checkARR = A

        // this.$refs.tree.setCheckedKeys(A) 原来写法
        // 目前选择菜单，按钮自动选择;

        //获得小方块接口
        this.right_loading = true
        getSquareFun().then((Response) => {
          this.SquareDataList = Response.data
          this.right_loading = false
        })
        //获得选中的小方块
        get_Sq(this.rowClone.id).then((Response) => {
          console.log('什么东西---', Response)
          this.DERT = Response.data
          this.pitchon = Response.data
          this.$bus.emit('wer', this.pitchon)
        })
      })
    })
    //获取点中的小方块
    this.$bus.on('BackPitchArr', (newValue) => {})
  },
  methods: {
    //右侧弹窗关闭
    Conceal_201() {
      this.PC = false
      this.$bus.emit('backToAuthorization', this.PC)
    },
    //树形图搜索框功能
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    //树形图节点
    NodeClick(node) {
      this.middle_loading = true
      this.TreeSaveNode = node
      console.log('获取当前菜单按钮的权限：', node)
      //获得按钮权限
      getCheckedBtn(this.TreeSaveNode.id).then((Response) => {
        console.log('得到的结果：', Response.data)
        this.CheckedBtnArr = Response.data
        this.middle_loading = false
      })
    },
    //保存方法
    SaveSQ() {
      let groupId = this.rowClone.id
      let obj = this.SaveSD
      postSquareFun(groupId, obj).then((Response) => {
        this.$message({
          message: '保存成功！',
          type: 'success',
        })
      })
    },
    //查看节点
    ptv(node, self, childrenCheck) {
      console.log({
        当前节点: node,
        当前节点选中状态: self,
        当前节点子节点选中状态: childrenCheck,
      })
      this.TreeSaveNode.id = node.id
      //获得选中的按钮
      getCheckedBtn(this.TreeSaveNode.id).then((Response) => {
        console.log('点击复选框：', Response.data)
        this.CheckedBtnArr = Response.data
      })
    },
    //首页小方块权限返回的项
    backsquare(squareData) {
      //保存小方块
      // let groupId=this.TreeSaveNode.id
      this.SaveSD = squareData
      // postSquareFun(groupId,obj).then(Response=>{

      // })
    },
    //按钮权限返回选中的项
    backBtnList(arrval) {
      // let obj = {
      //   menuId: this.TreeSaveNode.id,
      //   elementIds: arrval //
      // };
      //let arr = [];
      // arrval.forEach(val => {
      //   arr.push(val.id);
      // });

      this.SaveBFobj = arrval
    },
    //保存按钮权限
    SaveBtnqx() {
      let id = this.rowClone.id
      let meunId = this.TreeSaveNode.id
      let elementIds = this.SaveBFobj
      SaveBtnFun(id, meunId, elementIds).then((Response) => {
        this.$message({
          message: '保存成功!',
          type: 'success',
        })
      })
    },
    //菜单列表保存
    menuSave() {
      //合并全选和半选的
      let ck = this.$refs.tree.getCheckedKeys()
      let Halfck = this.$refs.tree.getHalfCheckedKeys()
      let arr = ck.concat(Halfck)
      SaveMenvFun(this.rowClone.id, arr).then((Response) => {
        this.$message({
          message: '租户权限保存成功！',
          type: 'success',
        })
      })
    },
    //全选
    clickAllFun() {
      let ARR = []
      this.TreeData.forEach((val) => {
        ARR.push(val.id)
      })
      this.checkARR = ARR
    },
    //反选 逻辑有点问题
    InvertSelection() {
      //选中的节点 this.$refs.tree.getCheckedNodes()
      let cArr = this.$refs.tree.getCheckedKeys()
      console.log('*********************************************')

      console.log(cArr)
      let ARR = []
      this.TreeData.forEach((val) => {
        ARR.push(val.id)
      })
      console.log(ARR)
      //
      let arre = JSON.parse(JSON.stringify(ARR))
      for (let i = 0; i < ARR.length; i++) {
        for (let j = 0; j < cArr.length; j++) {
          if (ARR[i] == cArr[j]) {
            arre.splice(i, 1)
            // this.$delete()
          }
        }
      }
      this.$refs.tree.setCheckedKeys(arre)
    },
    //重置按钮
    resetFun() {
      this.$refs.tree.setCheckedKeys([])
    },
  },
}
</script>
<style lang="scss" scoped>
.out {
  height: 80%;
  display: flex;
  background: #f0f4fa;
  overflow: auto;
  .left {
    flex: 1;
    border: 1px solid #ffffff;
    .zero {
    }
    .one {
      height: 35px;
      line-height: 35px;
      // border-top: 1px solid #efeeee;
      border-bottom: 1px solid #cccccc;
      .fontone {
        margin: 0px 10px;
        .icon {
          float: right;
          margin-right: 10px;
          cursor: pointer;
        }
      }
    }
    .btns {
      height: 45px;
      .childb {
        border: 1px solid #848484;
        background: #e7f5f9;
        font-size: 12px;
        color: #07799a;
        padding: 5px 5px;
        border-radius: 3px;
        margin: 4px 4px;
        :hover {
          background: #0b9ac3;
        }
      }
    }
    .treeFT {
      margin: 5px 5px;
    }
  }
  .middle {
    flex: 1;
    border: 1px solid #ffffff;
    .title {
      height: 35px;
      background: #f0f4fa;
      line-height: 35px;
      padding: 0px 10px;
      border-bottom: 1px solid #ccc;
      .font {
        // float: right;
        margin-left: 20px;
      }
      .icon {
        float: left;
        line-height: 35px;
        font-size: 10px;
        color: #07799a;
        cursor: pointer;
      }
      .Sa {
        float: right;
        line-height: 35px;
        cursor: pointer;
      }
    }
  }
  .right {
    flex: 1;
    border: 1px solid #ffffff;
    .title {
      height: 35px;
      background: #f0f4fa;
      // font-size: 13px;
      line-height: 35px;
      padding: 0px 10px;
      border-bottom: 1px solid #ccc;
      .font {
        margin-left: 15px;
        float: left;
      }
      .Sa {
        float: right;
        line-height: 35px;
        cursor: pointer;
      }
    }
  }
}
.tree_out {
  background: #f0f4fa;
}
</style>
